<template>
  <view class="docInfo">
    <AtNavBar
      v-if="role === 'student'"
      :onClickRgIconSt="settingClick"
      :onClickRgIconNd="uploadClick"
      :onClickLeftIcon="gobackClick"
      color='#000'
      :title='deptTitle'
      leftIconType="chevron-left"
      rightSecondIconType="upload"
      :rightFirstIconType="settingStyle"
    />
    <AtNavBar
      v-else
      color='#000'
      :title='deptTitle'
    />
    <view class="myList">
      <AtList v-if="!settingsKey">
        <view class="myItem" v-for="(item,index) in stuDocList" @tap="myitemClick(item)">
          <AtListItem :title='item.title.length > 12 ? item.title.substring(0,11)+"...": item.title' />
          <AtTag class="tag" size="small" circle active>{{ item.status_title }}</AtTag>
        </view>
      </AtList>
      <AtList v-else>
        <view class="myItem" v-for="(item,index) in stuDocList" >
          <AtListItem :title='item.title.length > 12 ? item.title.substring(0,11)+"...": item.title' :onClick="myitemClick.bind(this,item)"/>
          <AtIcon  v-if="item.mod_id !== 'sxjdb'" class="tag" value='close-circle' size='30' color='#f00' :on-click="delDoc.bind(this,item)"></AtIcon>
        </view>
      </AtList>
    </view>
    <AtFab :onClick="onAddDoc" class="fab" v-if="role === 'student'">
      <text class='at-fab__icon at-icon at-icon-add'></text>
    </AtFab>
    <AtFloatLayout
      :isOpened=myopen
      title='添加文档'
      :onClose="handleClose">
      <AtForm>
        <picker
          mode='selector'
          :range="selectorInfo"
          :value="selectorValue"
          @change="handleChange"
          @cancel="handleCancel"
        >
          <view class='demo-list-item myAddItem'>
            <view class='demo-list-item__label'>选择文档类型</view>
            <AtTag class="tag"   size="small" circle active>
              {{ selectorInfo[selectorValue] }}
            </AtTag>
          </view>
        </picker>
        <view class='myAddItem'>
          <AtInput
            name='value1'
            title='文档标题'
            type='text'
            placeholder='编辑文档标题(可选)'
            :value="createDoc.title"
            :onChange="createDocChange"
          />
        </view>
          <AtButton formType='submit' class="submit" type="secondary" :onClick="onSubmitDoc">确认添加</AtButton>
      </AtForm>
    </AtFloatLayout>
    <AtMessage />
    <AtModal
      :isOpened="myModal1"
      cancelText='取消'
      confirmText='确认'
      :onClose="sureClose"
      :onCancel="sureCancel"
      :onConfirm="sureConfirm"
      title='确认删除？'
    />
    <AtModal :isOpened="myModal2" >
      <AtModalHeader>审核二维码</AtModalHeader>
      <AtModalContent class="codeContent">
        <AtNoticebar icon='volume-plus'>
          请截图后分享给带教科室
        </AtNoticebar>
        <view>
          <p>{{ deptTitle }}</p>
          <p style="text-align: center">{{ userInfo.realname }}({{userInfo.sex}})</p>
        </view>
        <image class="code" :src="QrCode.qrCode" mode="widthFix"></image>
      </AtModalContent>
      <AtModalAction> <AtButton style="width: 100%" :on-click="closeModel">确定</AtButton></AtModalAction>
    </AtModal>
  </view>
</template>

<script>
import './DocList.less'
import Taro from "@tarojs/taro";
export default {
  data () {
    return {
      userInfo:{},
      myModal1:false,
      myModal2:false,
      settingsKey:false,
      selector:['hlcf','xjk','jkjy','dsbg'],
      selectorInfo:['护理查房','小讲课','健康教育','读书报告'],
      selectorValue:0,
      myopen:false,
      index:"",
      deptTitle:"",
      rec_id:"",
      submitDoc_id:"",
      stuDocList:[],
      page:0,
      createDoc:{
        mod_id:"hlcf",
        rec_id:"",
        title:""
      },
      delDoc_id:"",
      updateDoc:{
        doc_id:"",
        content:"",
        page:1
      },
      file:"",
      QrCode:{},
      role:""
    }
  },
  computed:{
    settingStyle(){
      if (this.settingsKey){
        return  { value: 'settings', size: 18, color: '#f00' }
      }else {
        return  { value: 'settings', size: 18, color: '#000' }
      }
    }
  },
  mounted() {
    this.rec_id = this.$taro.Current.router.params.rec_id;
    this.index = this.$taro.Current.router.params.index;
    this.userInfo = Taro.getStorageSync("userInfo");
    this.role = this.userInfo.role;
    console.log(this.userInfo)
    if (this.index){
      this.deptTitle = Taro.getStorageSync("SelectedListItem")[this.index].title;
      this.getDocStudentList()
    }else {
      this.deptTitle = this.userInfo.ext.title
      this.getDocDeptList();
    }
  },
  methods: {
    closeModel(){
      this.myModal2 = false;
    },
    uploadClick(e){
      let flag = false;
      this.stuDocList.forEach( item => {
        if (item.status < 3){
          flag = true;
        }
      });
      if (flag){
        this.myModal2 = !this.myModal2;
        this.getQrCode();
      }else {
        Taro.showToast({
          title: "当前所有文档已审核完毕",
          icon: "none"
        })
      }
    },

    sureClose(){
    },
    sureCancel(){
      this.myModal1 = !this.myModal1
    },
    sureConfirm(){
      this.delStuDoc();
    },
    delDoc(e){
      this.delDoc_id = e.doc_id;
      this.myModal1 = !this.myModal1
    },
    settingClick(){
      this.settingsKey = !this.settingsKey
    },
    createDocChange(e){
      this.createDoc.title = e
    },
    handleCancel(e) {
    },
    handleChange (e) {
      this.selectorValue = e.detail.value
    },
    onAddDoc(){
      this.myopen = !this.myopen;
    },
    onSubmitDoc(){
      if (this.createDoc.title.length>15){
        Taro.showToast({
          title: "标题最长15字",
          icon: "none"
        })
        return
      }
      this.createDoc.rec_id = this.rec_id
      this.createDoc.mod_id =this.selector[this.selectorValue];
      if (this.createDoc.title === ''){
        this.createDoc.title = this.selectorInfo[this.selectorValue]
      }
      this.CreateStuDoc()
    },
    handleClose(){
      this.createDoc.title = ""
    },
    myitemClick(itemInfo){
      let doc_id = itemInfo.doc_id
      let mod_id = itemInfo.mod_id
      Taro.setStorageSync("itemDocInfo",itemInfo);
      let myUrl;
      if (mod_id === "jkjy" || mod_id === "dsbg" || mod_id === "xjk"){
        myUrl= `/pages/JKDSJK/JKDSJK?doc_id=${doc_id}&mod_id=${mod_id}`
      }else if(mod_id === "sxjdb"){
        myUrl= `/pages/SXJDB/SXJDB?doc_id=${doc_id}&mod_id=${mod_id}`
      }else {
        myUrl= `/pages/HLCF/HLCF?doc_id=${doc_id}&mod_id=${mod_id}`
      }
      this.$taro.navigateTo({
        url: myUrl,
      })
    },
    gobackClick(){
      Taro.navigateBack({
        delta: 1
      })
    },

    /**
     * 获取文档列表
     * @returns {Promise<void>}
     */
    async getDocStudentList() {
      let res =  await this.$myRequest({
        url: "?s=App.Doc_Student.List",
        data:{
          rec_id:this.rec_id
        }
      })
      // console.log(res)
      if (res.data.ret === 200){
        this.stuDocList = res.data.data.list;
      }
    },
    /**
     * 获取文档列表
     * @returns {Promise<void>}
     */
    async getDocDeptList() {
      let res =  await this.$myRequest({
        url: "?s=App.Doc_Unit.List",
      })
      console.log(res)
      if (res.data.ret === 200){
        this.stuDocList = res.data.data.list;
      }
    },
    /**
     * 新增文档
     * @returns {Promise<void>}
     */
    async CreateStuDoc() {
      let res =  await this.$myRequest({
        url: "?s=App.Doc_Student.Create",
        data:{
          rec_id:this.createDoc.rec_id,
          mod_id:this.createDoc.mod_id,
          title:this.createDoc.title
        }
      })
      if (res.data.ret === 200){
        Taro.atMessage({
          message: '添加文档成功',
          type:"success"
        })
        this.createDoc.title = ""
        await this.getDocStudentList()
      }
    },


    /**
     * 文档删除
     * @returns {Promise<void>}
     */
    async delStuDoc() {
      let res =  await this.$myRequest({
        url: "?s=App.Doc_Student.Delete",
        data:{
          doc_id:this.delDoc_id,
        }
      })
      if (res.data.ret === 200){
        Taro.atMessage({
          message: '删除文档成功',
          type:"success"
        })
        this.myModal1 = !this.myModal1
        await this.getDocStudentList()
      }
      await this.getDocStudentList()
    },
    /**
     * 更新文档
     * @returns {Promise<void>}
     */
    async UpdateStuDoc() {
      let res =  await this.$myRequest({
        url: "?s=App.Doc_Student.Update",
        data:{
          doc_id:this.updateDoc.doc_id,
          content:this.updateDoc.content,
          page:this.updateDoc.page
        }
      })
    },
    /**
     * 获取审核二维码
     * @returns {Promise<void>}
     */
     async getQrCode() {
      let res =  await this.$myRequest({
        url: "?s=App.Doc_Student.GetQrCode",
        data:{
          rec_id:this.rec_id
        }
      })
      this.QrCode = res.data.data;
    },
    /**
     * 文件上传
     * @returns {Promise<void>}
     */
    async UploadFile() {
      let res =  await this.$myRequest({
        url: "?s=App.Doc_Student.Upload",
        data:{
          file:this.file
        }
      })
    },
  },
}
</script>
<style lang="less">
.codeContent{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .code{
    width: 279px;
    height: 261px;
  }
}

.myAddItem{
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 1rem;
  .at-input{
    padding: 0px;
    margin: 0px;
  }
}
.fab{
  position: fixed;
  bottom: 50px;
  left: 50px;
}
.myList{
  margin-top: 35px;
  .at-list__item{
    margin-bottom: 20px;
  }
  .myItem{
    padding-left: 1rem;
    display: flex;
    position: relative;
    .tag{
      position: absolute;
      top: 0.85rem;
      right: 0.25rem;
    }
  }
}
</style>
